<template>
    <div>
        <div class="header Cgreen">
			<div class="wrapper clearfix">
				<img class="bg1" src="../../assets/login/logo_01.png"/>
				<img class="bg1" src="../../assets/login/logo1.png"/>
			</div>
		</div>
		<div class="content">
			<div class="wrapper">
				<img class="bg1" src="../../assets/login/bg1.png"/>
				<div class="loginBox">
					<div class="formDiv">
						<h3>用户登录</h3>
						<form action="" method="post">
							<label class="user">
								<input type="text" v-model="name" placeholder="请输入用户名"/>
								<!-- <i class="iconfont">&#xe614;</i> -->
                <i class="iconfont">&#xe639;</i>
							</label>
							<label class="pwd">
								<input type="password" v-model="pwd" placeholder="请输入密码" @keyup.enter="logintoindex"/>
								<!-- <i class="iconfont">&#xe615;</i> -->
                <i  class="iconfont">&#xe626;</i>
							</label>
						
							<el-button :plain="true" @click="logintoindex" class="submit">登录</el-button>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="wrapper">
			<span>版权所有 Copyright(C)2016  南京嘉环信息技术培训中心 苏ICP备09049457-1号</span>
			</div>
		</div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      pwd: ""
    };
  },
  name: "Login",
  mounted() {
    //数据清理
    // window.localStorage.clear() 
    setContentHeight();
    window.onresize = setContentHeight;
    function setContentHeight() {
      let windowHeight = document.documentElement.clientHeight;
      document.getElementsByClassName("content")[0].style.height =
        windowHeight - 102 - 138 + "px";
    }
  },
  methods: {
    //登录校验
    logintoindex() {
      if (this.name.trim() === "") {
        this.$message("用户名不能为空");
        return false;
      }
      if (this.pwd.trim() === "") {
        this.$message("密码不能为空");
        return false;
      }
      console.log("开始请求");
      this.$axios.get("/login",{params:{name:this.name,pwd:this.pwd}})
      .then(Json => {
                    
          if (Json.data === 2) {
            this.$message("此用户没有没有登录权限");
            return false;
          }
          if (Json.data === 3) {
            this.$message("密码输入错误！！");
            return false;
          }
          this.$message("登录成功！！");        
          this.$store.commit('resdpath',Json.data.path);// 上传路径
          this.$store.commit('httpsapp',Json.data.HttpApp);  //手机端路径             
          if (
            Json.data.teacherinfo.Te_isadmin == 1 ||
            Json.data.teacherinfo.Te_isadmin == 2
          ) {
            this.$store.commit('increment',JSON.stringify(Json.data.teacherinfo));//登录信息
            this.$store.commit('logname',Json.data.teacherinfo.Te_number); 
            this.$store.commit('logtoken',Json.data.token); // token           
            //管理员入口
            this.$router.push("index");
          } else {
            this.$store.commit('increment',JSON.stringify(Json.data.teacherinfo));//登录信息
            this.$store.commit('logname',Json.data.teacherinfo.Te_number);//名称 
            this.$store.commit('logtoken',Json.data.token);  // token 
            //导师入口
            this.$router.push("selectPosition");
          }
        })
        .catch(error => {
          this.$message("登录信息错误！请稍尝试");
        });
    }
  }
};
</script>


<style scoped>
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
button,
select {
  margin: 0;
  padding: 0;
}
body,
input,
textarea,
select,
button,
table {
  font-size: 12px;
  line-height: 1.25em;
  outline: none;
}
img,
fieldset {
  border: 0;
}
ul,
ol {
  list-style: none;
}
em,
address {
  font-style: normal;
}
a {
  color: #666;
  text-decoration: none;
}
a:hover {
  text-decoration: none !important;
}
table {
  border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6,
em,
i {
  font-style: normal;
  font-weight: 400;
  outline: none;
}
img {
  border: none;
  vertical-align: middle;
}
* {
  box-sizing: border-box;
}
body {
  font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei",
    sans-serif;
}
/* @font-face {
  font-family: "iconfont"; project id 650174
  src: url("//at.alicdn.com/t/font_650174_9aisvhb1dwvcxr.eot");
  src: url("//at.alicdn.com/t/font_650174_9aisvhb1dwvcxr.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_650174_9aisvhb1dwvcxr.woff") format("woff"),
    url("//at.alicdn.com/t/font_650174_9aisvhb1dwvcxr.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_650174_9aisvhb1dwvcxr.svg#iconfont")
      format("svg");
} */
@font-face {
  font-family: 'iconfont';  /* project id 1514769 */
  src: url('//at.alicdn.com/t/font_1514769_hyiyzmippsb.eot');
  src: url('//at.alicdn.com/t/font_1514769_hyiyzmippsb.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1514769_hyiyzmippsb.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1514769_hyiyzmippsb.woff') format('woff'),
  url('//at.alicdn.com/t/font_1514769_hyiyzmippsb.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1514769_hyiyzmippsb.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.clearfix {
  zoom: 1;
}
.Cgreen {
  color: #58c94a;
}
.Cred {
  color: #fa7252;
}
.Cyellow {
  color: #f6b900;
}
.Cblue {
  color: #48c8ff;
}
.hide {
  display: none;
}
input::-webkit-input-placeholder {
  color: #b4b4b4;
  font-weight: 100;
}
input::-moz-placeholder {
  color: #b4b4b4;
  font-weight: 100;
}
input:-moz-placeholder {
  color: #b4b4b4;
  font-weight: 100;
}
input:-ms-input-placeholder {
  color: #b4b4b4;
  font-weight: 100;
}
/* wrapper */
.wrapper {
  width: 1200px;
  margin: 0 auto;
}
/* header */
.header {
  height: 122px;
  line-height: 122px;
}
.header h1 {
  font-size: 36px;
  line-height: 122px;
  margin-left: 7px;
  float: left;
}
/* content */
.content {
  background: url(../../assets/login/bg.png) no-repeat,
    -webkit-linear-gradient(-45deg, #48c8ff, #54b7fe);
  background: url(../../assets/login/bg.png) no-repeat,
    -moz-linear-gradient(-135deg, #48c8ff, #54b7fe);
  background: url(../../assets/login/bg.png) no-repeat,
    linear-gradient(-135deg, #48c8ff, #54b7fe);
}
.content .wrapper {
  height: 100%;
  position: relative;
}
.content .wrapper .bg1 {
  position: absolute;
  top: 50%;
  left: -165px;
  margin-top: -214px;
}
.content .wrapper .loginBox {
  width: 350px;
  height: 320px;
  padding: 40px 50px;
  background: #ffffff;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: 60%;
  margin-top: -220px;
}
.content .wrapper .loginBox .formDiv {
  font-size: 16px;
}
.content .wrapper .loginBox .formDiv h3 {
  text-align: center;
  margin-bottom: 40px;
}
.content .wrapper .loginBox .formDiv input[type="text"],
.content .wrapper .loginBox .formDiv input[type="password"] {
  margin-bottom: 20px;
  width: 100%;
  height: 42px;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  box-shadow: 1px 5px 6px 0px rgba(236, 236, 236, 0.5);
  padding: 5px 5px 5px 40px;
  font-size: 16px;
}
.content .wrapper .loginBox .formDiv input[type="text"]:focus,
.content .wrapper .loginBox .formDiv input[type="password"]:focus {
  border-color: #53b9fe;
}
.content .wrapper .loginBox .formDiv label {
  position: relative;
}
.content .wrapper .loginBox .formDiv label i.iconfont {
  color: #d4dee7;
  font-size: 18px;
  position: absolute;
  top: 3px;
  left: 15px;
}
.content .wrapper .loginBox .formDiv input[type="text"]:focus + i.iconfont,
.content .wrapper .loginBox .formDiv input[type="password"]:focus + i.iconfont {
  color: #53b9fe;
}
.content .wrapper .loginBox .formDiv .submit {
  display: inline-block;
  height: 42px;
  line-height: 42px;
  width: 100%;
  color: #ffffff;
  border: 1px solid #53b9fe;
  background: #53b9fe;
  border-radius: 4px;
  text-align: center;
}
.content .wrapper .loginBox .formDiv .submit:hover {
  background: #53b9fe;
}
.content .wrapper .loginBox .formDiv .submit:active {
  background: #53b9fe;
}
/* footer */
.footer {
  height: 102px;
  line-height: 102px;
  text-align: center;
  font-size: 14px;
  color: #646464;
}
</style>



